<template>
  <div class="warpper">
    <template v-if="list.length < 1">
      <van-empty description="空空如也!" />
    </template>
    <div style="margin-top: 10px">
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="(item, index) in list" :key="index" :to="'/productDetails?id=' + item.id">
          <van-image :src="imgUrls + item.coverImage" height="140" />
          <span>
            <font size="4">{{ item.bookName }}</font>
          </span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getBookList } from '@/api/product.js'
export default {
  data() {
    return {
      list: [],
      imgUrls: this.$baseApi,
      limit: 10,
      cid: ''
    }
  },
  created() {
    this.index()
  },
  methods: {
    index(name, val, limit) {
      this.cid = this.$route.query.cid
      getBookList({ categoryId: this.cid }).then(res => {
        this.list = res.rows
      })
      this.$route.meta.title = '书籍列表'
    }
  }
}
</script>

<style scoped>
.warpper {
  background-color: #f8f8f8;
  padding: 5px;
}
</style>
